<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>chord change</title>
	<style>
		body{
			background: #76D8FD;
			width: 100vw;
			height: 100vh;
			text-align:center;
		}
		input{
			/*height: 50px;*/
			width: 20%;
		}
		#inputs{
			display: flex;
			flex-direction :column ;
			margin: 0 auto;
			width: 80%;
			/*height: 50px;*/
			align-items: center;
		}
		#btn{
			width: 10%;
			height: 30px;
		}
		#result{
			font-size: 50px;
			font-weight: bold;
		}
	</style>
</head>
<body>
	<div id="inputs">
		chords: <input type="text" id="chord_input"> </br>
		step: <input type="number" id="step_input"> </br>
		<button id="btn" onclick="main()">change</button>
		<span id="result"></span>
	</div>
	
	
	

	<script>

		var number_to_chord = new Map([
			[1,    "C" ],
            [1.5,  "C#"],
			[2,    "D" ],
            [2.5,  "D#"],
			[3,    "E" ],
			[4,    "F" ],
            [4.5,  "F#"],
			[5,    "G" ],
            [5.5,  "G#"],
			[6,    "A" ],
            [6.5,  "A#"],
			[7,    "B" ]
		]);

		var chord_to_number = new Map([
			["C"  ,1    ],
            ["C#"  ,1.5 ],
			["D"  ,2    ],
            ["D#"  ,2.5 ],
			["E"  ,3    ],
			["F"  ,4    ],
            ["F#"  ,4.5 ],
			["G"  ,5    ],
            ["G#"  ,5.5 ],
			["A"  ,6    ],
            ["A#"  ,6.5 ],
			["B"  ,7    ]
		]);
		const chords = [1,  1.5, 2, 2.5 , 3, 4, 4.5, 5, 5.5, 6, 6.5, 7];

		function get_chord_idx(chord){
			for (var i = 0; i < chords.length; ++i)
			{
				if(chords[i] === chord){
					return i;
				}
			}
			return -1;
		}
		function count(arr, target){
			for (var i = arr.length - 1; i >= 0; i--) {
				if(arr[i] === target){
					return true;
				}
			}
			return false;
		}


        function change(origin, step){
            var char_chord =  origin[0];
            var idx = get_chord_idx(chord_to_number.get(char_chord));
            if(origin === "F#m"){
            	idx = 6;
            }
            var tmp = (idx + step) < 0 ?  chords.length - Math.abs(idx + step): (idx + step);
            var result = parseInt(tmp % chords.length);
            var out = number_to_chord.get(chords[result]);
            if(count(origin, "m")){
                out += "m";
            }
            return out;
        }

		function main(){
			var chord_input = document.getElementById("chord_input");
			var val = chord_input.value;
			var arr = val.split(" ");
			var step_input = document.getElementById("step_input");
			var step = parseInt(step_input.value);
			// console.log(arr, step);
			document.getElementById("result").innerText = "";

			for (var i = 0; i < arr.length; ++i)
			{
				if(arr[i].trim() === ""){
					continue;
				}
				var result = change(arr[i], step);
				var out = arr[i] + " -> " + result +  "\n";

				// console.log(out);
				document.getElementById("result").innerText += out;
			}
		}
	</script>
</body>
</html>